<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0;margin: 0;
    }
    input[type='checkbox']{
        outline: none;
        -webkit-appearance: none;
        margin: 50px;
        border: 10px solid #c1c1c1;
        border-radius: 50px;
        width: 150px;height: 70px;
        background: rgb(134, 129, 129);
        position: relative;
        box-shadow: 0 0 10px #3f3f3f inset;
        transition: 0.6s;
    }
    input[type='checkbox']::after{
        content: "";
        display: block;
        width: 60px;height: 60px;
        position: absolute;
        border-radius: 30px;
        left: -5px;top:-5px;
        background: linear-gradient(to bottom,#d3d3d3,#9e9e9e);
        box-shadow: 0px 2px 2px 0px #eee inset,2px 1px 1px 0px #333;
        transition: 0.6s;
    }
    input[type='checkbox']:checked{
        background: #6fb500;
    }
    input[type='checkbox']:checked::after{
        left:75px;
    }
</style>
<body>
    <!--
        (外观) -webkit-appearance: none;
        (伪元素)xxx::after{
            content:"";
            ...
        }
        (渐变背景)background: linear-gradient(to bottom,#d3d3d3,#9e9e9e);方向，开始颜色，结束颜色
        (阴影)box-shadow: 水平偏移 垂直偏移 模糊值 扩大范围 阴影颜色 默认向外
        transition:width(要过渡的属性名称) 1s(过渡时间) ease-in(过渡方式) 2s(延迟时间);
        选择器
        伪选择器 xxx:first-child选择第一个xxx元素
        伪选择器 xxx:nth-of-type(even)选择序号同类型(如同是P标签)为偶数的xxx元素
        伪选择器 xxx:nth-of-type(odd)选择序号同类型(如同是P标签)为奇数的xxx元素
        伪选择器 xxx:nth-child(n)选择序号(自然排序)为n的xxx元素
        属性选择器 xxx[attr(属性名称) = val(属性值) ]
        属性选择器 xxx[href $(表示属性的结尾) = val ]
        属性选择器 xxx[class ^(表示属性的开头) = val ]
    -->
    <input type="checkbox">
</body>
</html>